<template>
	<div>
		<p class="text-title" @click="visible = !visible">选择菜品</p>

		<ul class="list-card">
			<li class="list-item" v-for="(item, index) in dishList" :key="index">
				<FileList :src="item.pic" style="width: 100%; height: 80px; border-radius: 10px" :single="true"></FileList>
				<div class="f-between padding">
					<div class="f-between">
						<p class="text-name">{{ item.dishName }}</p>
						<p class="f12">￥{{ item.price }}/{{ item.quantifier }}</p>
					</div>
					<el-icon @click="handleDelete(item, index)" class="pointer">
						<icon-delete-one theme="outline" size="24" fill="#f00" />
					</el-icon>
				</div>
			</li>
		</ul>
		<el-drawer append-to-body v-model="visible" title="选择菜品组合（点击勾选组合）" size="65%">
			<MenuCheck :dish_type_data="dish_type_data" v-model="dishList" @change="updateData"></MenuCheck>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import apiMod from '@/apiMod/index'
import MenuCheck from './MenuCheck.vue'

const props = defineProps<{
	modelValue?: any
	modelName?: string
	packageId?: string | number
}>()

const emit = defineEmits(['update:modelValue', 'update:modelName'])

const visible = ref(false)
const listData = ref([])
const dishList = ref([])
const dish_type_data = ref([])

const updateData = () => {
	const ids = dishList.value.map((item) => item.id)
	const name = dishList.value.map((item) => item.dishName)
	emit('update:modelName', name.toString())
	emit('update:modelValue', ids)
}
const handleDelete = (item, index) => {
	dishList.value.splice(index, 1)
	updateData()
}

const getInitData = () => {
	apiMod.getDictItemList('DISH_TYPE').then((res) => {
		const data = res.data['DISH_TYPE']
		dish_type_data.value = data
	})

	if (props.packageId) {
		apiMod.view_omPackage_view(props.packageId).then((res) => {
			dishList.value = res.data?.omDishList
		})
	}

	apiMod
		.view_omDish_page({
			state: 0,
       pageParaPO:{
        size:500,
        current:1,
      }
		})
		.then((res) => {
      const data = res.data
			listData.value = data.records || []
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style lang="scss" scoped>
.text-title {
	cursor: pointer;
	color: rgb(11, 111, 234);
	font-weight: bold;
}
.text-name {
	font-weight: bold;
}
.text-link {
	color: rgb(11, 111, 234);
	cursor: pointer;
}

.pointer {
	cursor: pointer;
}
.list-card {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	user-select: none;
	.list-item {
		border-radius: 10px;
		width: calc((100% - 80px) / 4);
		min-width: 240px;
		box-shadow: 0px 1px 1px #1e80ff;
		.item-content {
			padding: 10px;
			display: flex;
			flex-flow: column;
			justify-content: space-around;
		}
	}
}
</style>
